<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML>
<html>
<head>
<%@include file="/WEB-INF/css.jsp" %>
<%@include file="/WEB-INF/javascript.jsp" %>
<title>Padgett Resource Management - User Control</title>
<script>
$(document).ready(function(){
	$('#ChangeRoleDialog').dialog({
		title:'Change Role',
		resizable:false,
		autoOpen:false,
		modal:true,
		draggable:false,
		width:600,
		height:600,
		buttons:{
			"Save":function(){
				// Save the change
				$.ajax({
					url:'/AjaxSaveUserRole',
					type:'POST',
					dataType:'json',
					data:{
						"UserId":$('#UserId').val(),
						"Role":$('#ChangeRoleForm :radio:checked').val()
					},
					success:function(data,status,xhr){
						window.location.href='/usercontrol.jsp';
					},
					error:function(xhr,status,error){
						alert('xhr:'+xhr+',status:'+status+',Error:'+error);
					}
				});
			},
			Cancel:function(){
				$(this).dialog('close');
			}
		},
		open:function(){
			$('#ChangeRoleForm #RolesContainer').buttonset();
			$.ajax({
				url:'/AjaxGetUser',
				type:'GET',
				dataType:'json',
				data:{
					"UserId":$('#UserId').val()
				},
				success:function(data,status,xhr){
					if(data.success==true){
						var user=data.data;
						$('#ChangeRoleForm :input:text').each(function(index,element){
							$(this).val(user[$(this).attr('name')]);
						});
						$('#ChangeRoleForm :input:radio').each(function(index,element){
							if(user[$(this).attr('name')]==$(this).attr('id')){
								$(this).attr('checked','checked').button('refresh');
							}
						});
						$('#ChangeRoleForm :input:checkbox').each(function(index,element){
							if(user[$(this).attr('name')]!=undefined){
								if(user[$(this).attr('name')]==true){
									$(this).attr('checked','checked').button('refresh');
								}else{
									$(this).removeAttr('checked').button('refresh');
								}
							}
						});
					}else{
						alert('Error:'+data.error);
					}
				},
				error:function(xhr,status,error){
					alert('Error:'+error);
				}
			});
		},
		close:function(){
			$('#ChangeRoleForm :input').clear();
		}
	});
	$.ajax({
		url:"/AjaxGetUsers",
		type:"GET",
		dataType:"json",
		success:function(data,status,xhr){
			var users=data.data;
			var userContainer=$('#UserContainer').empty();
			for(var i=0;i<users.length;i++){
				userContainer.append('<div id="'+users[i].UserId+'" style="float:left;width:98%;padding:5px 5px 5px 5px;">'+
				'<div style="float:left;width:33%;padding:5px 5px 5px 5px;">'+users[i].Nickname+'</div>'+
				'<div style="float:left;width:30%;padding:5px 5px 5px 5px;">'+users[i].Email+'</div>'+
				'<div style="float:left;width:30%;padding:5px 5px 5px 5px;"><input id="'+users[i].UserId+'" name="ChangeRoleButton" type="button" value="'+users[i].Role+'"/></div>'+
				'</div>');
			}
			// Bind all change role buttons
			$('#UserContainer :input').button().click(function(){
				$('#ChangeRoleForm #UserId').val($(this).attr('id'));
				// Open edit dialog.
				$('#ChangeRoleDialog').dialog('open');
			})
		},
		error:function(xhr,status,error){
			alert('Error:'+error);
		}
	});
});
</script>
</head>
<body>
<%@include file="/WEB-INF/usercontrolnavigation.jsp" %>
<div class="ListContainer" style="margin-bottom:10px;margin-top:-20px;">
<h2>USER CONTROL</h2>
<div id="ChangeRoleDialog">
<form id="ChangeRoleForm">
<input id="UserId" name="UserId" type="hidden"/>
<div id="float:left;width:100%;">
Role:<div id="RolesContainer">
<input id="admin" name="Role" type="radio" value="admin"/><label for="admin">Admin</label>
<input id="user" name="Role" type="radio" value="user"/><label for="user">User</label>
</div>
</div>
</form>
</div>
<div id="UserContainer" style="float:left;width:95%;margin-bottom:10px;">
</div>
</div>
</body>
</html>